<template>
    <div class="data">
        <div v-for="item in content" :key="item.name" class="item">
            <div class="myname">
                {{ item.name }}
                <el-popover
                    width="auto"
                    trigger="hover"
                    placement="top"
                    popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;">
                    <template #reference>
                        <el-icon style="margin-left: 4px; color: #fff; background: #969696; border-radius: 50%">
                            <QuestionFilled />
                        </el-icon>
                    </template>
                    <template #default>
                        <div class="desc">{{ item.desc }}</div>
                    </template>
                </el-popover>
            </div>
            <div class="num">{{ numFormat(data[item.key]) }}</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue';
import { numFormat } from '@/utils/utils';
const props = defineProps(['info']);
const data = ref({});
const content = [
    { name: '触发客户人次', key: 'total_person_times', desc: '累计触发规则的客户人次' },
    { name: '触发客户数', key: 'total_person_num', desc: '累计触发的客户数' },
    {
        name: '发送短信数',
        key: 'total_sms_num',
        desc: '累计发送的短信条数'
    },
    {
        name: '触达短信数',
        key: 'total_success_sms_num',
        desc: '累计成功发送的短信条数'
    },
    {
        name: '企微消息未执行数',
        key: 'total_qw_num',
        desc: '触发规则但是没有分配员工的客户次数'
    },
    {
        name: '企微消息已执行数',
        key: 'total_success_qw_num',
        desc: '触发规则且有分配员工的客户'
    }
];
watch(
    () => props.info,
    val => {
        data.value = val;
    }
);
</script>

<style lang="scss" scoped>
.totalCard {
    margin-top: 16px;
    border-bottom: 2px solid #ffc69e;
    box-sizing: border-box;

    :deep(.el-card__body) {
        padding: 17px 24px 24px;
    }

    .title {
        font-size: 16px;
        padding-bottom: 16px;
        border-bottom: 1px solid #eaeaea;
    }
}

.data {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    padding: 32px 24px;
    margin-top: 16px;
    border-radius: 4px;
    border: 1px solid #eaeaea;
    background-color: #fff;

    .item {
        text-align: left;

        .myname {
            display: flex;
            font-size: 14px;
            font-family: PingFangSC-Regular, 'PingFang SC';
            font-weight: 400;
            color: #666;
            line-height: 20px;
        }

        .num {
            padding-top: 8px;
            font-size: 30px;
            font-family: HelveticaNeue-Medium, HelveticaNeue;
            font-weight: 500;
            color: #33302d;
            line-height: 36px;
        }
    }
}

.desc {
    max-width: 412px;
    white-space: normal;
    word-break: break-all;
    word-wrap: break-word;
    font-size: 12px;
    font-family: PingFangSC-Regular, 'PingFang SC';
    font-weight: 400;
    color: #33302d;
    line-height: 20px;
}
</style>
